<template>
    <div class="live">
        <div class="header">
            <div class="header-left">
                <span @click="goback()"></span>
            </div>
            <div class="header-center">
                京东直播
            </div>
            <div class="header-right" @click="change()">
                <span></span>
            </div>
            <div class="drop-down-list" v-show="show1">
                <ul>
                    <li>
                        <router-link to="/">
                            <span><img src="../../assets/images/dropdownlist1.png" alt=""></span>
                            <strong>首页</strong>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/classification">
                            <span><img src="../../assets/images/dropdownlist2.png" alt=""></span>
                            <strong>分类搜索</strong>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/">
                            <span><img src="../../assets/images/dropdownlist3.png" alt=""></span>
                            <strong>购物车</strong>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/">
                        <span><img src="../../assets/images/dropdownlist4.png" alt=""></span>
                            <strong>我的京东</strong>
                        </router-link>
                    </li>
                    <li>
                        <router-link to="/">
                        <span><img src="../../assets/images/dropdownlist5.png" alt=""></span>
                            <strong>浏览记录</strong>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>  

        <div class="nav">
            <ul>
                <li><p>精选</p></li>
            </ul>
        </div> 

        <div class="main">
            <div class="list">
                <div v-for="(v,i) in livelist" class="livelist">
                    <router-link to="/">
                        <div class="pics">
                            <img :src="v.epicture" class="pictures">
                            <div class="iconbox">
                                <div class="l-icon">
                                    <div class="theicon">
                                        <span class="l-text">直播</span>
                                        <span class="anime anime1"></span>
                                        <span class="anime anime2"></span>
                                        <span class="anime anime3"></span>
                                    </div>
                                </div>
                                <div class="l-num">{{v.num}}</div>
                            </div>
                        </div>
                        <div class="l-right">
                            <div class="l-title">
                                <span class="t1" v-if="v.t1=='券'">{{v.t1}}</span>
                                <span class="t2" v-if="v.t2=='自营'">{{v.t2}}</span>
                                <span class="t3">{{v.t3}}</span>
                            </div>
                            <p class="upper">{{v.upper}}</p>
                            <div class="goods">
                                <div class="good"><img :src="v.p1"></div>
                                <div class="good"><img :src="v.p2"></div>
                                <div class="good"><img :src="v.p3"></div>
                                <div class="more">{{v.more}}</div>
                            </div>
                        </div>
                    </router-link> 
                </div>
            </div>

            <!-- <div class="prepare">
                <div class="prepare-title">
                    <div class="p-icons">
                        <div class="icon1"></div>
                        <div class="icon2"></div>
                        <div class="icon3"></div>
                    </div>
                    <div class="p-name">即将开播</div>
                    <div class="p-icons">
                        <div class="icon3"></div>
                        <div class="icon2"></div>
                        <div class="icon1"></div>
                    </div>
                </div>

                <div class="prepare-main">
                    <div class="themain">
                        <div class="content" v-for="(v,i) in content">
                            
                        </div>
                    </div>
                </div>
            </div> -->

            <div class="review">
                <div class="prepare-title">
                    <div class="p-icons">
                        <div class="icon1"></div>
                        <div class="icon2"></div>
                        <div class="icon3"></div>
                    </div>
                    <div class="p-name">精彩回顾</div>
                    <div class="p-icons">
                        <div class="icon3"></div>
                        <div class="icon2"></div>
                        <div class="icon1"></div>
                    </div>
                </div>
                <div class="list">
                    <div v-for="(v,i) in reviewlist" class="livelist">
                        <router-link to="/">
                            <div class="pics">
                                <img :src="v.epicture" class="pictures">
                                <img src="../../assets/images/open.png" alt="" class="play-btn">
                                <div class="iconbox">
                                    <div class="l-icon">
                                        <div class="theicon play">
                                            <span class="l-text">回放</span>
                                        </div>
                                    </div>
                                    <div class="l-num">{{v.num}}</div>
                                </div>
                            </div>
                            <div class="l-right">
                                <div class="l-title">
                                    <span class="t1" v-if="v.t1=='券'">{{v.t1}}</span>
                                    <span class="t2" v-if="v.t2=='自营'">{{v.t2}}</span>
                                    <span class="t3">{{v.t3}}</span>
                                </div>
                                <p class="upper">{{v.upper}}</p>
                                <div class="goods">
                                    <div class="good"><img :src="v.p1"></div>
                                    <div class="good"><img :src="v.p2"></div>
                                    <div class="good"><img :src="v.p3"></div>
                                    <div class="more">{{v.more}}</div>
                                </div>
                            </div>
                        </router-link> 
                    </div>
                </div>
            </div>

            <p class="livebuttom">别拉！到底了！快去别的分类看看</p>
        </div>     
    </div>
</template>

<script>
    export default{
        data(){
            return{
                show1:false,
                livelist:{},
                content:{},
                reviewlist:{}
            }
        },
        mounted(){
            this.$http.get('./data/live.json')
            .then((respone)=>{
                console.log(respone.data);
                this.livelist=respone.data.livelist;
                this.content=respone.data.content;
                this.reviewlist=respone.data.reviewlist;
            })
            .catch(function(error){
                console.log(error);
            })
            .then(function(){

            })
            
        },
        methods:{
            change(){
                this.show1=!this.show1
            },
            goback(){
                this.$router.go(-1)
            }
        }
    }
</script> 

<style scoped>
    .live{
            background: #f0f0f0;
        }
    .live  .header{
        position: relative;
        height: 44px;
        width: 100%;
        border-bottom: 1px solid #e5e5e5;
        background-color: #fff;
        /* margin-top: -60px; */
    }
    .live .header-left{
        width: 10%;
        height: 44px;
        padding-top: 1px;
        float: left;
    }
    .live .header-left span{
        background: url("") no-repeat 50%;
        margin: 12px 0 0 10px;
        width: 20px;
        height: 20px;
        background-position: 0 0;
        background-size: contain;
        display: block;
    }
    .live .header-center{
        float: left;
        text-align: center;
        width: 80%;
        line-height: 44px;
    }
    .live .header-right{
        float: left;
        width: 10%;
    }
    .live .header-right span{
        background: url() no-repeat 50%;
        margin: 12px 12px 12px 0px;
        width: 20px;
        height: 20px;
        background-size: 20px;
        display: block;
    }
    .live .drop-down-list ul{
        position: absolute;
        border-radius: 4px;
        width: 125px;
        background: rgba(0,0,0,.9);
        top: 53px;
        right: 10px;
        z-index: 1000;
    }
    .live .drop-down-list ul::before{
        position: absolute;
        top: -5px;
        right: 5px;
        width: 10.5px;
        height: 5px;
        background: url() no-repeat 50%;
        background-size: 100% 100%;
        content: "";
    }
    .live .drop-down-list ul li{
        display: block;
        position: relative;
        margin-left: 40px;
        border-bottom: 1px solid hsla(0,0%,100%,.2);
        height: 40px;
        line-height: 40px;
        z-index: 1000;
        font-size: 14px;
    }
    .live .drop-down-list ul li a{
        color: #fff;
        text-decoration: none;
        font-size: 14px;   
    }
    .live .drop-down-list ul li span{
        position: absolute;
        top: 0;
        left: -40px;
        width: 40px;
        height: 40px;
    }
    .live .drop-down-list ul li span img{
        width: 15px;
        height: 15px;;
    }
    .live .nav{
        width: 100%;
        background-color: #fff;
    }
    .live .nav ul{
        transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1);
        transition-duration: 0ms;
        transform: translate(0px, 0px) translateZ(0px);
        display: flex;
        overflow: auto;
        justify-content: center;
    }
    .live .nav ul li{
        min-width: 4.5rem;
        position: relative;
        float: left;
        width: 6rem;
        padding: 0 .5rem;
        text-align: center;
        font-size: 1rem;
        line-height: 2.5rem;
    }
    .live .nav ul li p{
        color: red;
        border-bottom: 2px solid red;
    }
    .live .main{
        float: left;
        width: 100%;
        overflow: hidden;
        background: rgb(243, 243, 243);
    }
    .live .list{
        margin: 15px 10px 0 10px;
        box-sizing: border-box;
        /* box-shadow: 0 3px 12px 0 rgba(102, 103, 113, 0.15);
        border-radius: 12px; */
        overflow: hidden;
    }
    .live .livelist{
        background: #fff;
        width: 100%;
        position: relative;
        overflow: hidden;
        height: 8.8rem;
        margin-bottom: 10px;
        box-shadow: 0 3px 12px 0 rgba(102, 103, 113, 0.15);
        border-radius: 12px;  
    }
    .live .livelist a{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        text-decoration: none;
        text-align: left;
    }
    .live .livelist .pics{
        position: relative;
        width: 40%;
        overflow: hidden;
        flex-shrink: 0;
        flex-grow: 0;
    }
    .live .livelist .pictures{
        width: 100%;
    }
    .live .livelist .l-right{
        /* margin-left: 10px;
        margin-top: 10px;
        overflow: hidden; */
        margin-left: 2%;
        margin-top: 9px;
        overflow: hidden;
        width: 58%;
    }
    .live .livelist .l-right .t3{
        font-size: 17px;
        color: #000000;
        line-height: 24px;
        vertical-align: bottom;
        word-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
    }
    .live .livelist .upper{
        margin-top: 5px;
        font-size: 14px;
        color: #666666;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .live .livelist .goods{
        position: absolute;
        bottom: 10px;
        display: flex;
    }
    .live .livelist .goods .good{
        width: 3.3rem;
        height: 3.3rem;
        border-radius: 3px;
        margin-right: 3px;
        overflow: hidden;
    }
    .live .livelist .good img{
        width: 100%;
        border: none;
        vertical-align: bottom;
    }
    .live .livelist .more{
        background: #FFF3F3;
        border-radius: 3px;
        color: #FDA8B0;
        text-align: center;
        width: 20px;
        font-size: 10px;
        line-height: 14px;
        padding: 13px 4px;
    }
    .live .livelist .t1{
        background-image: linear-gradient(90deg, #FD4646 5%, #FA6F49 100%);
        display: inline-block;
        font-size: 10px;
        color: #FFFFFF;
        text-align: left;
        line-height: 18px;
        border-radius: 10px;
        padding: 2px 6px;
        margin-right: 5px;
        background-color: #e93b3d;
    }
    .live .livelist .t2{
        display: inline-block;
        font-size: 10px;
        color: #FFFFFF;
        text-align: left;
        line-height: 18px;
        border-radius: 10px;
        padding: 2px 6px;
        margin-right: 5px;
        background-color: #e93b3d;
    }
    .live .livelist .iconbox{
        position: absolute;
        top: 5px;
        left: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-radius: 2.5rem;
        background: rgba(0, 0, 0, 0.3);
    }
    .live .livelist .theicon{
        width: 2.6rem;
        border-radius: 2.5rem;
        opacity: .9;
        display: flex;
        align-items: baseline;
        justify-content: center;
        height: .95rem;
        z-index: 2;
        background-color: #f02b2b;
    }
    .live .livelist .play{
        background: #4a4a4a;
    }
    .live .livelist .anime{
        display: inline-block;
        vertical-align: bottom;
        width: 2px;
        background-color: white;
        border-radius: 2px 2px 0 0;
        margin-left: 2px;
    }
    .live .livelist .anime1{
        height: 8px;
        animation: liveAnime1 1s infinite steps(2);
    }
    .live .livelist .anime2{
        height: 12px;
        animation: liveAnime2 1s infinite steps(1);
    }
    .live .livelist .anime3{
        height: 4px;
        animation: liveAnime3 1s infinite steps(2);
    }
    .live .livelist .l-text{
        font-size: .6rem;
        color: #fff;
        height: 1rem;
        line-height: 1rem;
    }
    .live .livelist .l-num{
        display: inline-block;
        margin-left: 3px;
        margin-right: 5px;
        height: 1rem;
        line-height: 1rem;
        font-size: 0.5rem;
        color: white;
        z-index: 1;
    }
    @keyframes liveAnime1{
        0%{
            height: 8px;
        }
        50%{
            height: 4px;
        }
        100%{
            height: 8px;
        }
    }
    @keyframes liveAnime2{
        0%{
            height: 12px;
        }
        50%{
            height: 8px;
        }
        100%{
            height: 12px;
        }
    }
    @keyframes liveAnime3{
        0%{
            height: 4px;
        }
        50%{
            height: 12px;
        }
        100%{
            height: 4px;
        }
    }
    .live .prepare-title{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 17px;
        margin-bottom: 17px;
        padding: 0 14px;
    }
    .live .p-icons{
        display: flex;
        align-items: center;
    }
    .live .icon1{
        height: 1px;
        width: 10px;
        margin-right: 5px;
        margin-left: 5px;
        display: inline-block;
        background: #666771;
    }
    .live .icon2{
        width: 2px;
        height: 5px;
        margin-right: 2px;
        display: inline-block;
        background: #666771;
    }
    .live .icon3{
        width: 2px;
        height: 9px;
        margin-right: 2px;
        display: inline-block;
        background: #666771;
    }
    .live .p-name{
        font-size: 16px;
        color: #666771;
        margin-left: 14px;
        margin-right: 14px;
    }
    .live .prepare-main{
        overflow-x: auto;
        overflow-y: hidden;
        display: flex;
    }
    .live .themain{
        display: inline-block;
    }
    .live .livelist .play-btn{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate3d(-50%, -50%, 0);
        width: 3rem;
        height: 3rem;
    }
    .live .livebuttom{
        color: #848689;
        text-align: center;
        line-height: 3rem;
        font-size: 1rem;
        font-family: PingFang;
    }
</style>